<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CRM管理系统</title>
  <style>
    .el-header {
      background-color: #92b8d2;
      color: #333;
      line-height: 80px;
    }
    .el-tabs__item.is-active {
      background-color: #7fcbd9;
    }
  </style>
</head>
<body>
<div id="app">
  <el-container>
    <!--顶栏-->
    <el-header height="80px" style="align-content: center">

      <el-row>
        <el-col :span="21">
          <span style="font-size: 30px;font-weight: bold;font-family: 华文宋体">CRM管理平台</span>
        </el-col>
        <el-col :span="2">
          <el-button id="userName" type="text" @click="updateUserInfo"></el-button>
        </el-col>
        <el-col :span="1">
          <el-button type="info" icon="el-icon-s-tools" circle @click="logout"></el-button>
        </el-col>
      </el-row>
    </el-header>
  </el-container>
  <!--主体页面-->
  <el-tabs
          v-model="activeName"
          :tab-position="tabPosition">
    <el-tab-pane label="导航栏" disabled></el-tab-pane>
    <el-tab-pane disabled></el-tab-pane>

    <!--1 客户管理-->
    <el-tab-pane label="客户管理" name="mainPage">
      <el-row>
        <el-button type="danger" @click="deleteByIds1"  plain>批量删除</el-button>
        <el-button type="primary" @click="toAddForm1" plain>新增客户</el-button>
      </el-row>

      <el-table
              :data="clientData"
              border
              @selection-change="handSelectionChange">
          <el-table-column
                  type="selection"
                  width="55"
                  align="center">
          </el-table-column>
        <el-table-column
                prop="cid"
                align="center"
                width="80"
                label="公司编号">
        </el-table-column>
        <el-table-column
                prop="company"
                align="center"
                label="公司名称"
                width="200">
        </el-table-column>
        <el-table-column
                prop="sort"
                align="center"
                label="分类"
                width="80">
        </el-table-column>
        <el-table-column
                prop="address"
                align="center"
                label="公司地址">
        </el-table-column>
        <el-table-column
                prop="description"
                align="center"
                label="描述">
        </el-table-column>
        <el-table-column
                fixed="right"
                align="center"
                label="操作">
          <!--编辑和删除-->
          <template slot-scope="scope">
            <el-row>
              <el-button type="primary" size="medium" @click="updateByUid1(scope.row)" plain>编辑</el-button>
              <el-button type="danger" size="medium" @click="deleteByUid1(scope.row)" plain>删除</el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
              @size-change="handleSizeChange1"
              @current-change="handleCurrentChange1"
              :current-page="currentPage1"
              :page-sizes="[6, 12, 18, 24]"
              :page-size="pageSize1"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalCount1">
      </el-pagination>

      <el-dialog title="添加客户" :visible.sync="dialogAddClient"  width="25%" :center="true">
        <el-form :model="client">

          <el-form-item label="公司名称" :label-width="formLabelWidth">
            <el-input v-model="client.company" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="类别" :label-width="formLabelWidth">
            <el-input v-model="client.sort" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="地址" :label-width="formLabelWidth">
            <el-input v-model="client.address" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="描述" :label-width="formLabelWidth">
            <el-input v-model="client.description" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="addClient">确 定</el-button>
          <el-button @click="dialogAddClient = false">取 消</el-button>
        </div>
      </el-dialog>

      <el-dialog title="更新" :visible.sync="dialogUpdateClient" width="25%" :center="true">
        <el-form :model="client">

          <el-form-item label="公司名称" :label-width="formLabelWidth">
            <el-input v-model="client.company" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="类别" :label-width="formLabelWidth">
            <el-input v-model="client.sort" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="地址" :label-width="formLabelWidth">
            <el-input v-model="client.address" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="描述" :label-width="formLabelWidth">
            <el-input v-model="client.description" autocomplete="off"></el-input>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="updateClient">确 定</el-button>
          <el-button @click="dialogUpdateClient = false">取 消</el-button>

        </div>
      </el-dialog>
    </el-tab-pane>
    <el-tab-pane disabled></el-tab-pane>


    <!--2 联系人管理-->
    <el-tab-pane label="联系人管理" name="contactPage">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item >
          <el-input v-model="keyContactInfo" placeholder="请输入关键词" clearable></el-input>
        </el-form-item>
          <el-button type="primary" @click="KeySelect">搜索</el-button>
        </el-form-item>
      </el-form>
      <!--新增联系人-->
      <el-row>
        <el-button type="primary" @click="toAddContact" plain>新增客户</el-button>
      </el-row>
      <!--数据表格-->
      <el-table
              :data="contactData" height="550px" border>
        <el-table-column
                prop="cid" align="center" label="公司编号">
        </el-table-column>
        <el-table-column
                prop="conName" align="center" label="姓名">
        </el-table-column>
        <el-table-column
                prop="position" align="center" label="职位">
        </el-table-column>
        <el-table-column
                prop="tel" align="center" label="联系电话">
        </el-table-column>
        <el-table-column
                prop="email" align="center" label="电子邮件">
        </el-table-column>
        <el-table-column
                fixed="right" align="center" label="操作">
          <!--编辑和删除-->
          <template slot-scope="scope">
            <el-row>
              <el-button type="primary" size="medium" @click="updateContact1(scope.row)" plain>编辑</el-button>
              <el-button type="danger" size="medium" @click="deleteContact(scope.row)" plain>删除</el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <!--编辑弹框-->
      <el-dialog title="更新联系人信息" :visible.sync="dialogUpdateContact" width="25%" :center="true">
        <el-form :model="contact">

          <el-form-item label="公司编号" :label-width="formLabelWidth">
            <el-input v-model="contact.cid" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="contact.conName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="职位" :label-width="formLabelWidth">
            <el-input v-model="contact.position" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="电话" :label-width="formLabelWidth">
            <el-input v-model="contact.tel" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="电子邮箱" :label-width="formLabelWidth">
            <el-input v-model="contact.email" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="updateContact2">保存</el-button>
          <el-button @click="cancelUpdateContact">取 消</el-button>
        </div>
      </el-dialog>
      <!--添加弹框-->
      <el-dialog title="添加联系人" :visible.sync="dialogAddContact" width="25%" :center="true">
        <el-form :model="contact">

          <el-form-item label="公司编号" :label-width="formLabelWidth">
            <el-input v-model="contact.cid" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="contact.conName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="职位" :label-width="formLabelWidth">
            <el-input v-model="contact.position" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="电话" :label-width="formLabelWidth">
            <el-input v-model="contact.tel" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="电子邮箱" :label-width="formLabelWidth">
            <el-input v-model="contact.email" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="addContact">确 定</el-button>
          <el-button @click="cancelAddContact">取 消</el-button>
        </div>
      </el-dialog>
    </el-tab-pane>
    <el-tab-pane disabled></el-tab-pane>

    <!--3 销售管理-->
    <el-tab-pane label="销售管理" name="salePage"><!--label !=label-->
      <el-tabs type="border-card">
        <el-tab-pane label="产品管理">
          <!--新增按钮-->
          <el-row>
            <el-button type="primary" @click="toAddGoods" plain>新增产品</el-button>
            <!--<el-button type="primary" @click="toBuyGoods" plain>下单订购</el-button>-->
          </el-row>
          <!--数据表格-->
          <el-table
                  :data="goodsData" height="530px" border>
            <el-table-column
                    prop="gid" align="center" label="产品编号">
            </el-table-column>
            <el-table-column
                    prop="name" align="center" label="产品名称">
            </el-table-column>
            <el-table-column
                    prop="company" align="center" label="生产公司">
            </el-table-column>
            <el-table-column
                    prop="sort" align="center" label="分类">
            </el-table-column>
            <el-table-column
                    prop="price" align="center" label="售价">
            </el-table-column>
            <el-table-column
                    prop="count" align="center" label="库存">
            </el-table-column>
            <el-table-column
                    fixed="right" align="center" label="操作">
              <!--编辑和删除-->
              <template slot-scope="scope">
                <el-row>
                  <el-button type="primary" size="medium" @click="updateGoods1(scope.row)" plain>编辑</el-button>
                  <el-button type="danger" size="medium" @click="deleteGoods(scope.row)" plain>删除</el-button>
                </el-row>
              </template>
            </el-table-column>
          </el-table>
          <!--分页-->
          <el-pagination
                  @size-change="handleSizeChange2"
                  @current-change="handleCurrentChange2"
                  :current-page="currentPage2"
                  :page-sizes="[8, 16, 32, 40]"
                  :page-size="pageSize2"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="totalCount2">
          </el-pagination>
          <!--编辑弹框-->
          <el-dialog title="更新产品信息" :visible.sync="dialogUpdateGoods" width="25%" :center="true">
            <el-form :model="goods">
              <el-form-item label="产品名称" :label-width="formLabelWidth">
                <el-input v-model="goods.name"  autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="生产公司" :label-width="formLabelWidth">
                <el-input v-model="goods.company" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="分类" :label-width="formLabelWidth">
                <el-input v-model="goods.sort" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="售价" :label-width="formLabelWidth">
                <el-input v-model="goods.price" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="库存" :label-width="formLabelWidth">
                <el-input v-model="goods.count" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="updateGoods2">保存</el-button>
              <el-button @click="cancelUpdateGoods">取 消</el-button>
            </div>
          </el-dialog>
          <!--添加弹框-->
          <el-dialog title="添加产品" :visible.sync="dialogAddGoods" width="25%" :center="true">
            <el-form :model="goods">

              <el-form-item label="产品名称" :label-width="formLabelWidth">
                <el-input v-model="goods.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="生产公司" :label-width="formLabelWidth">
                <el-input v-model="goods.company" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="分类" :label-width="formLabelWidth">
                <el-input v-model="goods.sort" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="售价" :label-width="formLabelWidth">
                <el-input v-model="goods.price" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="库存" :label-width="formLabelWidth">
                <el-input v-model="goods.count" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="addGoods">确 定</el-button>
              <el-button @click="cancelAddGoods">取 消</el-button>
            </div>
          </el-dialog>
          <!--订购产品弹框-->
          <el-dialog title="订购产品" :visible.sync="dialogBuyGoods" width="400px" :center="true">
            <el-form :model="order">
              <el-form-item label="客户编号" :label-width="formLabelWidth">
                <el-input v-model="order.cid" style="width:250px" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="产品编号" :label-width="formLabelWidth">
                <el-input v-model="order.gid" style="width:250px" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="订购数量" :label-width="formLabelWidth">
                <el-input v-model="order.num" style="width:250px" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="buyGoods">确定下单</el-button>
              <el-button @click="cancelBuyGoods">取 消</el-button>
            </div>
          </el-dialog>
        </el-tab-pane>

        <el-tab-pane label="订单管理">
          <el-table
                  :data="orderData" height="550px" border>
            <el-table-column
                    prop="oid" align="center" label="订单编号">
            </el-table-column>
            <el-table-column
                    prop="cid" align="center" label="客户编号">
            </el-table-column>
            <el-table-column
                    prop="gid" align="center" label="产品编号">
            </el-table-column>
            <el-table-column
                    prop="num" align="center" label="订购数量">
            </el-table-column>
            <el-table-column
                    prop="total" align="center" label="订购总价">
            </el-table-column>
            <el-table-column
                    prop="datatime" align="center" label="订购时间" :formatter="formatDate">
            </el-table-column>
            <el-table-column
                    fixed="right" align="center" label="操作">
              <!--删除-->
              <template slot-scope="scope">
                <el-row>
                  <el-button type="danger" size="medium" @click="deleteOrder(scope.row)" plain>删除</el-button>
                </el-row>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>

    </el-tab-pane>
    <el-tab-pane disabled></el-tab-pane>
    <!--4 客户服务-->
    <el-tab-pane label="客户服务" name="clientService">
      <el-tabs type="border-card">
        <el-tab-pane label="填写服务表单">
          <el-form :model="cservice" :rules="rules" ref="cservice" label-width="100px" class="demo-ruleForm" style="width: 400px">
            <el-form-item label="服务公司" prop="clientName">
              <el-input v-model="cservice.clientName"></el-input>
            </el-form-item>
            <el-form-item label="服务类型" prop="type">
              <el-select v-model="cservice.type" placeholder="请选择服务类型" style="width: 300px">
                <el-option label="咨询" value="咨询" ></el-option>
                <el-option label="建议" value="建议" ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="服务内容" prop="text">
              <el-input type="textarea" v-model="cservice.text"></el-input>
            </el-form-item>
            <el-form-item label="服务时间" prop="time" required>
              <el-date-picker type="date" placeholder="选择日期" v-model="cservice.time" style="width: 100%;"></el-date-picker>
            </el-form-item>

            <el-form-item label="服务状态" prop="state">
              <el-input v-model="cservice.state"></el-input>
            </el-form-item>
            <el-form-item label="服务评价" prop="evaluate">
              <el-input v-model="cservice.evaluate"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('cservice')">立即创建</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="服务管理">
          <el-table
                  :data="serviceData" height="550px"  border>
            <el-table-column
                    prop="id" align="center" label="服务编号" width="80px" >
            </el-table-column>
            <el-table-column
                    prop="clientName" align="center" label="服务客户">
            </el-table-column>
            <el-table-column
                    prop="type" align="center" label="服务类型">
            </el-table-column>
            <el-table-column
                    prop="text" align="center" label="服务内容">
            </el-table-column>
            <el-table-column
                    prop="state" align="center" label="服务状态">
            </el-table-column>
            <el-table-column
                   prop="time" align="center" label="服务时间" :formatter="formatDate">
            </el-table-column>
            <el-table-column
                    prop="evaluate" align="center" label="服务评价">
            </el-table-column>
            <el-table-column
                    fixed="right" align="center" label="操作">
              <!--删除-->
              <template slot-scope="scope">
                <el-row>
                  <el-button type="primary" size="medium" @click="setService1(scope.row)" plain>修改</el-button>
                  <el-button type="danger" size="medium" @click="deleteService(scope.row)" plain>删除</el-button>
                </el-row>
              </template>
            </el-table-column>
          </el-table>
          <!--更新弹框-->
          <el-dialog title="更新服务信息" :visible.sync="dialogUpdateService" width="40%" :center="true">
            <el-form :model="cservice">
              <el-form-item label="服务客户" :label-width="formLabelWidth">
                <el-input v-model="cservice.clientName" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="服务类型" :label-width="formLabelWidth">
                <el-input v-model="cservice.type" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="服务内容" :label-width="formLabelWidth">
                <el-input v-model="cservice.text" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="服务时间" :label-width="formLabelWidth">
                <el-date-picker type="date" placeholder="选择日期" v-model="cservice.time" style="width: 100%;"></el-date-picker>
              </el-form-item>
              <el-form-item label="服务状态" :label-width="formLabelWidth">
                <el-input v-model="cservice.state" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="服务评价" :label-width="formLabelWidth">
                <el-input v-model="cservice.evaluate" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="updateService2">保存</el-button>
              <el-button @click="cancelUpdateService2">取 消</el-button>
            </div>
          </el-dialog>
        </el-tab-pane>
      </el-tabs>

    </el-tab-pane>
    <!--更新个人信息-->
    <el-dialog title="更新账户信息"
               :visible.sync="dialogUserInfo" width="25%" center>
      <el-form :model="user" label-width="80px" :label-position="labelPosition">
        <el-form-item label="昵称" >
          <el-input v-model="user.userName"></el-input>
        </el-form-item>
        <el-form-item label="密码" >
          <el-input v-model="user.password" show-password></el-input>
        </el-form-item>
        <el-form-item label="职位" >
          <el-input v-model="user.position"></el-input>
        </el-form-item>
        <el-form-item label="备注" >
          <el-input v-model="user.description"></el-input>
        </el-form-item>
        <el-form-item label="电话号码" >
          <el-input v-model="user.tel"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveUserInfo">保存</el-button>
        <el-button type="primary" @click="dialogUserInfo = false">取消</el-button>
      </div>
    </el-dialog>
  </el-tabs>
</div>


<!--引入样式-->
<script src="../js/vue.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script src="../element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script>Vue.config.productionTip = false</script>

<script>
  new Vue({
    el:"#app",
    created(){
      // 接受用户对象
      let userInfo = sessionStorage.obj;
      console.log(userInfo);
      if (userInfo == null) {
        window.location.href ="/pages/login.html"
      } else {
        let obj = JSON.parse(userInfo);
        this.user.uid=obj.uid;
        this.user.userName=obj.userName;
        this.user.password=obj.password;
        this.user.position=obj.position;
        this.user.description=obj.description;
        this.user.tel=obj.tel;

        //绑定userId
        this.client.userId=this.user.uid;
        //显示用户名
        let uName = document.getElementById("userName");
        uName.innerHTML=obj.userName+",欢迎您！";
        this.selectAllByUid();
        this.selectAllByUid2();
        this.selectAllGoods();
        this.selectAllOrder();
        this.selectAllService();
      }
    },
    methods: {

      // 1 客户管理模块
      //查询所有--分页查询
      selectAllByUid(){
        axios.get("/client/"+this.user.uid+"/"+this.currentPage1+"/"+this.pageSize1).then((resp)=>{
          this.clientData=resp.data.data.rows;
          this.totalCount1=resp.data.data.totalCount;
        })
      },
      handSelectionChange(val) {
        this.multipleSelection = val;
      },
      updateByUid1(row){
        this.dialogUpdateClient=true;//显示弹框
        this.client=row;//填充数据到数据模型里
      },
      updateClient(){
        axios.put("/client/",this.client).then((resp)=>{//R(true,null, "修改成功")
          if(resp.data.flag = true){
            this.dialogUpdateClient=false,//关闭弹框
                    this.$message({
                      message: resp.data.msg,//修改成功
                      type: 'success'
                    });
            //重新查询所有数据
            this.selectAllByUid();
          }
        })
      },
      deleteByUid1(row){
        this.$confirm("此操作永久删除当前数据，是否继续？","提示",{
          type:'info'}).then(()=>{
          axios.delete("/client/"+row.cid).then((resp)=>{
            if(resp.data.flag=true){
              this.$message({
                message: resp.data.msg,
                type: 'success'
              });
              this.selectAllByUid();
            }
          })
        }).catch(()=>{
          this.$message.info("取消删除操作");
        })

      },
      toAddForm1(){
        this.dialogAddClient=true;
        this.client = {};
      },
      addClient(){
          axios.post("/client",this.client).then((resp)=>{
            if(resp.data.flag ==true){
              this.$message({
                message: resp.data.msg,
                type: 'success'
              });
              this.dialogAddClient=false;
              this.selectAllByUid();
            }
          })
      },
      deleteByIds1(){
        this.$confirm('将永久删除选中的多项记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //用户点击确定按钮
          //获取 ids 从this.multipleSelection获取
          for(let i = 0;i < this.multipleSelection.length;i++){
            let selectionelement = this.multipleSelection[i];
            this.selectedIds[i] = selectionelement.cid;
            console.log(this.selectedIds);
          }
          //发送Ajax请求
          axios.post("/client/deleteByIds",this.selectedIds).then((resp)=>{
            if(resp.data.flag==true){
              this.selectAllByUid();
              this.$message({
                message: resp.data.msg,
                type: 'success'
              });
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      // 分页功能的两个绑定函数
      handleSizeChange1(val) {
        /*console.log(`每页 ${val} 条`);*/
        //重新设置每页显示条数
        this.pageSize1=val;
        this.selectAllByUid();
      },
      handleCurrentChange1(val) {
        /* console.log(`当前页: ${val}`);*/
        //重新设置当前页码
        this.currentPage1=val;
        this.selectAllByUid();
      },

      //2 联系人管理
      selectAllByUid2(){
        axios.get("/contact/1").then((resp)=>{
          this.contactData=resp.data.data;
        })
      },
      KeySelect(){
        axios.get("/contact/"+this.user.uid+"/"+this.keyContactInfo).then((resp)=>{
          this.contactData=resp.data.data;
        })
      },
      updateContact1(row){
        this.dialogUpdateContact=true;
        this.contact=row;
        //清空模型数据
      },
      updateContact2(){
        axios.put("/contact/",this.contact).then((resp)=>{
          if(resp.data.flag = true){
            this.dialogUpdateContact=false,
                    this.$message({
                      message: resp.data.msg,
                      type: 'success'
                    });
            //重新查询所有数据
            this.selectAllByUid2();
            this.contact={};//清空模型数据
          }
        })
      },
      cancelUpdateContact(){
        this.dialogUpdateContact=false;
        this.contact={};
      },
      deleteContact(row){
        this.$confirm("此操作永久删除当前数据，是否继续？","提示",{
          type:'info'}).then(()=>{
          axios.delete("/contact/"+row.id).then((resp)=>{
            if(resp.data.flag=true){
              this.$message({
                message: resp.data.msg,
                type: 'success'
              });
              this.selectAllByUid2();
            }
          })
        }).catch(()=>{
          this.$message.info("取消删除操作");
        })
      },
      toAddContact(){
        this.dialogAddContact=true;
      },
      addContact(){
        axios.post("/contact",this.contact).then((resp)=>{
          if(resp.data.flag ==true){
            this.$message({
              message: resp.data.msg,
              type: 'success'
            });
            this.dialogAddContact=false;
            this.selectAllByUid2();
            this.contact={};//清空模型数据
          }
        })
      },
      cancelAddContact(){
        this.dialogAddContact=false;
        this.contact={};//清空模型数据
      },

      //3 销售管理
      /*selectAllGoods(){
        axios.get("/goods").then((resp)=>{
          this.goodsData=resp.data.data;
        })
      },*/
      selectAllGoods(){
        axios.get("/goods/"+this.currentPage2+"/"+this.pageSize2).then((resp)=>{
          this.goodsData=resp.data.data.rows;
          this.totalCount2=resp.data.data.totalCount;
        })
      },
      // 分页功能的两个绑定函数
      handleSizeChange2(val) {
        /*console.log(`每页 ${val} 条`);*/
        //重新设置每页显示条数
        this.pageSize2=val;
        this.selectAllGoods();
      },
      handleCurrentChange2(val) {
        /* console.log(`当前页: ${val}`);*/
        //重新设置当前页码
        this.currentPage2=val;
        this.selectAllGoods();
      },
      toAddGoods(){
        this.dialogAddGoods=true;
        this.goods= {};
      },
      addGoods(){
        axios.post("/goods",this.goods).then((resp)=>{
          if(resp.data.flag ==true){
            this.$message({
              message: resp.data.msg,
              type: 'success'
            });
            this.dialogAddGoods=false;
            this.selectAllGoods();
            this.goods={};//清空模型数据
          }
        })
      },
      cancelAddGoods(){
        this.dialogAddGoods=false;
        this.goods={};//清空模型数据
      },
      updateGoods1(row){
        this.dialogUpdateGoods=true;//显示弹框
        this.goods=row;
      },
      updateGoods2(){
        axios.put("/goods/",this.goods).then((resp)=>{
          if(resp.data.flag = true){
            this.dialogUpdateGoods=false,
                    this.$message({
                      message: resp.data.msg,
                      type: 'success'
                    });
            //重新查询所有数据
            this.selectAllGoods();
            this.goods={};//清空模型数据
          }
        })
      },
      cancelUpdateGoods(){
        this.dialogUpdateGoods=false;
        this.goods={};
      },
      deleteGoods(row){
        this.$confirm("此操作永久删除当前数据，是否继续？","提示",{
          type:'info'}).then(()=>{
          axios.delete("/goods/"+row.gid).then((resp)=>{
            if(resp.data.flag=true){
              this.$message({
                message: resp.data.msg,
                type: 'success'
              });
              this.selectAllGoods();
            }
          })
        }).catch(()=>{
          this.$message.info("取消删除操作");
        })
      },

      selectAllOrder(){
        axios.get("/order").then((resp)=>{
          this.orderData=resp.data.data;
        })
      },
      toBuyGoods(){
        this.dialogBuyGoods=true;
        this.order={};
      },
      buyGoods(){
        axios.post("/order",this.order).then((resp)=>{
          if(resp.data.flag ==true){
            this.$message({
              message: resp.data.msg,
              type: 'success'
            });
            this.dialogBuyGoods=false;
            this.selectAllOrder();
            this.order={};
          }
        })
      },
      cancelBuyGoods(){
        this.dialogBuyGoods=false;
      },
      deleteOrder(row){
        this.$confirm("此操作永久删除当前数据，是否继续？","提示",{
          type:'info'}).then(()=>{
          axios.delete("/order/"+row.oid).then((resp)=>{
            if(resp.data.flag=true){
              this.$message({
                message: resp.data.msg,
                type: 'success'
              });
              this.selectAllOrder();
            }
          })
        }).catch(()=>{
          this.$message.info("取消删除操作");
        })
      },

      //4 客户服务
      selectAllService(){
        axios.get("/service").then((resp)=>{
          this.serviceData=resp.data.data;
        })
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            axios.post("/service",this.cservice).then((resp)=>{
              if(resp.data.flag ==true){
                this.$message({
                  message: resp.data.msg,
                  type: 'success'
                });
                this.selectAllService();
                this.$refs[formName].resetFields();
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      setService1(row){
        this.dialogUpdateService=true;
        this.cservice=row;
      },
      updateService2(){
        axios.put("/service/",this.cservice).then((resp)=>{
          if(resp.data.flag = true){
            this.dialogUpdateService=false,
                    this.$message({
                      message: resp.data.msg,
                      type: 'success'
                    });
            //重新查询所有数据
            this.selectAllService();
            this.cservice={};//清空模型数据
          }
        })
      },
      cancelUpdateService2(){
        this.dialogUpdateService=false;
        this.cservice={};
      },
      deleteService(row){
        this.$confirm("此操作永久删除当前数据，是否继续？","提示",{
          type:'info'}).then(()=>{
          axios.delete("/service/"+row.id).then((resp)=>{
            if(resp.data.flag=true){
              this.$message({
                message: resp.data.msg,
                type: 'success'
              });
              this.selectAllService();
            }
          })
        }).catch(()=>{
          this.$message.info("取消删除操作");
        })
      },
      //统一显示日期格式方法区
      formatDate(row, column) {
        // 获取单元格数据
        let data = row[column.property]
        if(data == null) {
          return null
        }
        let dt = new Date(data)
        return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' /*+ dt.getHours() + ':' +
                dt.getMinutes() + ':' + dt.getSeconds()*/
      },

      updateUserInfo(){
        this.dialogUserInfo=true;
      },
      saveUserInfo(){
        axios.put("/user",this.user).then((resp)=>{
          if(resp.data.flag ==true){
            this.$message({
              message: resp.data.msg,
              type: 'success'
            });
            this.dialogUserInfo=false;
          }
        })
      },
      logout(){
        this.$confirm('确定退出登录吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then((resp) => {
          //退出成功
          this.user={};
          window.location.href="/pages/login.html";
        })
      }
    },

    data(){
      return{
        //标签的位置
        tabPosition:'left',
        //导航Tabs
        activeName:'mainPage',
        clientData:[],
        multipleSelection:[],
        selectedIds:[],//被选中的id数组集合
        formLabelWidth: '80px',
        dialogAddClient:false,
        dialogUpdateClient:false,

        client:{//客户数据模型
          cid:'',
          uid:'1',//这儿后面修改为登录用户的uid
          company:'',
          sort:'',
          address:'',
          description:''
        },
        currentPage1: 1,// 当前页码
        pageSize1: 6,// 每页显示条数
        totalCount1: 100,// 总记录数

        //2 联系人管理
        contactData:[],
        keyContactInfo:'',//联系人关键信息查找
        contact:{ //联系人数据模型
          id:'1',
          uid:1, //登陆账户的id
          cid:'',
          conName:'',
          position:'',
          tel:'',
          email:''
        },
        dialogUpdateContact:false,
        dialogAddContact:false,

        // 3 销售管理
        goodsData:[],
        goods:{
          gid:'',
          name:'',
          company:'',
          sort:'',
          price:'',
          count:''
        },
        dialogUpdateGoods:false,
        dialogAddGoods:false,
        order: {
          oid:'',
          uid:'',
          cid:'',
          gid:'',
          num:'',
          total:'',
          datatime:''
        },
        dialogBuyGoods:false,
        orderData:[],
        currentPage2: 1,// 当前页码
        pageSize2: 8,// 每页显示条数
        totalCount2: 100,// 总记录数

        user: {
          uid: '',
          userName: '',
          password: '',
          position: '',
          description: '',
          tel:''
        },
        serviceData:[],
        cservice: {
          id: '',
          type: '',
          clientName: '',
          text: '',
          state: '',
          time: '',
          evaluate: '',
        },
        rules: {
          clientName: [
            { required: true, message: '请输入服务公司', trigger: 'change' },
          ],
          type: [
            { required: true, message: '请选择服务类型', trigger: 'change' }
          ],
          time: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          state: [
            { required: true, message: '请填写服务状态', trigger: 'change' }
          ],
          text: [
            { required: true, message: '请填写服务内容', trigger: 'blur' }
          ],
          evaluate: [
            { required: true, message: '请填写服务评价', trigger: 'change' }
          ],
        },
        dialogUpdateService:false,

        dialogUserInfo:false,
      }
    }
  })
</script>
</body>
</html>